<!--作者:于大明-->
<template>
	<view class="my-card-body">
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="100" align="left">描述</uni-th>
				<uni-th align="left">输入值</uni-th>
				<uni-th width="60" align="left">
					<view class="d-flex flex-column">
						<text class="font-24">是否展示</text>
						<switch  class='blue'
							@change="allCalKeys.forEach(x=>wxUserForm[x]=$event.detail.value?'1':'0')"
							:class="isAllChecked?'checked':''" :checked="isAllChecked">
						</switch>
					</view>
					
				</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in tableTrs" :key="index">
				<uni-td v-if="item.valKey=='wxUserInfoImgUrls'||item.valKey=='nickName'">
					{{item.label}}<text class="text-red">*</text>
				</uni-td>
				<uni-td v-else>{{item.label}}</uni-td>
				<uni-td v-if="item.valKey=='wxUserInfoImgUrls'">
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view v-if="wxUserForm.wxUserInfoImgUrls" class="bg-img"
								v-for="(url,myIndex) in wxUserForm.wxUserInfoImgUrls.split(',').filter(x=>x)"
								:key="myIndex" @tap="$cw.previewImg(url,wxUserForm.wxUserInfoImgUrls)">
								<image :src="(wxUserForm.wxUserInfoImgUrls.split(','))[myIndex]" mode="aspectFill">
								</image>
								<view class="cu-tag bg-red" style="scale:0.5;top:-10rpx;right:-6rpx"
									@tap.stop="delImg(myIndex)">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="chooseImage"
								v-if="wxUserForm.wxUserInfoImgUrls?.split(',').length<=3">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</uni-td>
				<uni-td v-else-if="item.valKey=='sex'">
					<picker @change="wxUserForm[item.valKey]=sexTypes.map(x=>x.value)[$event.detail.value]" value="-1"
						:range="sexTypes.map(x=>x.text)">
						<view :class="{'text-placeholder':!wxUserForm[item.valKey]}">
							{{ sexTypes.find(x=>x.value==wxUserForm[item.valKey])?.text ||'点击选择>'}}
						</view>
					</picker>
				</uni-td>

				<uni-td v-else-if="item.type=='datetime'">
					<view class="picker" @tap="dateDialog=true" :class="{'text-placeholder':!wxUserForm[item.valKey]}">
						{{$filters['parseShortDate'](wxUserForm[item.valKey]) ||'点击选择>'}}
						{{$util.calAge(wxUserForm[item.valKey])}}
						{{$util.calAnimalSign(wxUserForm[item.valKey]) }}
						{{$util.calStar(wxUserForm[item.valKey])}}
					</view>

					<better-calendar ref="betterCalendarRef" :showCalendar="dateDialog"
						:defaultType="wxUserForm.isLunarBirthday==1?'lunar':'solar'" :defaultValue="[90, 0, 0]"
						@confirm="wxUserForm[item.valKey] = ($event.type=='lunar'? $filters['parseShortDate']($event.lunarDateNumber):$filters['parseShortDate']($event.solarDate));wxUserForm.isLunarBirthday=($event.type=='lunar'?'1':'0');dateDialog = false;"
						@cancel="dateDialog = false"></better-calendar>
				</uni-td>

				<uni-td
					v-else-if="['wxUserInfoAboutMe','wxUserInfoThinkOther','wxUserInfoLoveNotion','wxUserInfoInterest','wxUserInfoHomeBackground'].includes(item.valKey)">
					<uni-easyinput autoHeight type="textarea" v-model="wxUserForm[item.valKey]"
						:placeholder="item.label"></uni-easyinput>
				</uni-td>
				<uni-td v-else-if="item.valKey=='wxUserInfoHeight'">
					<picker @change="wxUserForm[item.valKey]=pickHeights[$event.detail.value]" value="-1"
						:range="pickHeights">
						<view :class="{'text-placeholder':!wxUserForm[item.valKey]}">
							{{wxUserForm[item.valKey]||'点击选择>'}}
						</view>
					</picker>
				</uni-td>
				<uni-td v-else-if="item.valKey=='wxUserInfoCurrentArea'">
					<picker @change="wxUserForm[item.valKey]=areas[$event.detail.value]" value="-1" :range="areas">
						<view :class="{'text-placeholder':!wxUserForm[item.valKey]}">
							{{wxUserForm[item.valKey]||'点击选择>'}}
						</view>
					</picker>
				</uni-td>

				<uni-td v-else-if="item.valKey=='wxUserInfoHouseCarType'">
					<picker @change="wxUserForm[item.valKey]=houseCarTypes.map(x=>x.value)[$event.detail.value]"
						value="-1" :range="houseCarTypes.map(x=>x.text)">
						<view :class="{'text-placeholder':!wxUserForm[item.valKey]}">
							{{ houseCarTypes.find(x=>x.value==wxUserForm[item.valKey])?.text ||'点击选择>'}}
						</view>
					</picker>
				</uni-td>

				<uni-td v-else-if="item.valKey=='wxUserInfoMarryType'">
					<picker @change="wxUserForm[item.valKey]=marryTypes.map(x=>x.value)[$event.detail.value]" value="-1"
						:range="marryTypes.map(x=>x.text)">
						<view :class="{'text-placeholder':!wxUserForm[item.valKey]}">
							{{ marryTypes.find(x=>x.value==wxUserForm[item.valKey])?.text ||'点击选择>'}}
						</view>
					</picker>
				</uni-td>

				<uni-td v-else-if="item.valKey=='wxUserInfoEduType'">
					<picker @change="wxUserForm[item.valKey]=eduTypes.map(x=>x.value)[$event.detail.value]" value="-1"
						:range="eduTypes.map(x=>x.text)">
						<view :class="{'text-placeholder':!wxUserForm[item.valKey]}">
							{{ eduTypes.find(x=>x.value==wxUserForm[item.valKey])?.text ||'点击选择>'}}
						</view>
					</picker>
				</uni-td>

				<uni-td v-else-if="item.valKey=='wxUserInfoHometownProvince'">
					<text @tap="pickPop=true;$refs.picker[0].show()">
						<text v-if="wxUserForm.wxUserInfoHometownProvince">
							{{wxUserForm.wxUserInfoHometownProvince}}/{{wxUserForm.wxUserInfoHometownCity}}/{{wxUserForm.wxUserInfoHometownArea}}
						</text>
						<text v-else class='text-placeholder'>
							点击选择>
						</text>
					</text>

					<uni-data-picker v-show="pickPop" :map="map" ref="picker" placeholder="请选择地址" :localdata="citys"
						popup-title="请选择城市" @popupclosed="pickPop=false" @change="wxUserForm.wxUserInfoHometownProvince=$event.detail.value[0].text;
						wxUserForm.wxUserInfoHometownCity=$event.detail.value[1].text;
						wxUserForm.wxUserInfoHometownArea=$event.detail.value[2].text;
						">
					</uni-data-picker>
				</uni-td>
				
				<uni-td v-else-if="item.valKey=='userInfoWxCodeUrl'">
					<view  class="bg-img d-flex" >
						<image  @tap="$cw.previewImg(wxUserForm.userInfoWxCodeUrl)" style="width: 100rpx; height: 100rpx;" :src="wxUserForm.userInfoWxCodeUrl" mode="widthFix">
						</image>
						<view class="solids mt-3 ml-2"  style="width: 50rpx; height: 50rpx;" @tap="chooseWxImage">
							<text class='cuIcon-cameraadd' style="font-size: 50rpx;"></text>
						</view>
					</view>
					
				</uni-td>
				
				<uni-td v-else-if="item.type=='money'">
					<uni-easyinput type="number" v-model="wxUserForm[item.valKey]"
						:placeholder="item.label"></uni-easyinput>
				</uni-td>
				<uni-td v-else>
					<uni-easyinput v-model="wxUserForm[item.valKey]" :placeholder="item.label"></uni-easyinput>
				</uni-td>
				<uni-td>
					<switch v-if="item.valKey!='nickName'&&item.valKey!='wxUserInfoImgUrls'" style="z-index: 0 !important;" class='blue'
						@change="wxUserForm[item.showKey]=$event.detail.value?'1':'0'"
						:class="wxUserForm[item.showKey]=='1'?'checked':''" :checked="wxUserForm[item.showKey]=='1'">
					</switch>
					
				</uni-td>
			</uni-tr>

		</uni-table>
	</view>
</template>

<script src="./my-card-body.js"></script>

<style lang="less" scoped>
	@import url('my-card-body.less');
</style>